<template>
  <div class="content">
    <div class="main"   :style="{'width':this.login?'92%':'100%'}">
      <div class="content-inside">
        <mu-paper :z-depth="5" class="demo-list-wrap">
          <div class="title">
            <mu-avatar size="130">
              <img src="../assets/images/logo.png" />
            </mu-avatar>
            <div class="chat">
              <mu-fade-transition>
                <div class="curchat" v-show="show" :style="{fontSize:titlesize}">{{robotsay}}</div>
                <!-- <div class="passchat">您好，我是大林，您的智能陪护机器人。今天天气很好哦。</div> -->
              </mu-fade-transition>
            </div>
          </div>
        </mu-paper>
      </div>
      <mu-slide-bottom-transition>
        <mu-paper
          v-if="saying"
          :z-depth="1"
          class="footer"
          :style="{'width':this.login?'92%':'100%'}"
        >
          <mu-text-field :placeholder="placeholder" class="query" @blur="Chat" v-model="query"></mu-text-field>
        </mu-paper>
        <mu-paper v-else class="button-wrapper footer">
          <mu-button
            round
            class="larger"
            @click="changeTab(1)"
            :color="active==1?'#33CB98':'#E1E7F5'"
          >饮食</mu-button>
          <mu-button
            round
            class="larger"
            @click="changeTab(2)"
            :color="active==2?'#33CB98':'#E1E7F5'"
          >运动</mu-button>
          <mu-button
            round
            class="larger"
            @click="changeTab(3)"
            :color="active==3?'#33CB98':'#E1E7F5'"
          >体征</mu-button>
          <mu-button
            round
            class="larger"
            @click="changeTab(4)"
            :color="active==4?'#33CB98':'#E1E7F5'"
          >行为</mu-button>
          <mu-button
            round
            class="larger"
            @click="changeTab(5)"
            :color="active==5?'#33CB98':'#E1E7F5'"
          >心情</mu-button>

          <mu-menu cover>
            <div class="demo">
              <mu-badge
                :content="todolist.length.toString()"
                circle
                color="red"
                class="demo-icon-badge"
              >
                <mu-button round flat class="larger daiban" color="#33CB98">待办</mu-button>
              </mu-badge>
            </div>
            <mu-list slot="content">
              <mu-list-item button v-for="(item , index) in todolist" :key="index">
                <mu-list-item-title>{{index+1}}.{{item}}</mu-list-item-title>
              </mu-list-item>
            </mu-list>
          </mu-menu>
        </mu-paper>
      </mu-slide-bottom-transition>
    </div>
  </div>
</template>
<script>
import { Chat } from "@/api/robot";

export default {
  components: {},
  props: {
    robotsay: { type: String, default: "您好，我是大林，您的智能陪护机器人" }
  },
  watch: {
    robotsay: function(value) {
      this.robotsay = value;
    }
  },

  data() {
    return {
      todolist: [
        "记得喝水噢。",
        "今天需要吃药呢！",
        "下午3点约了庄医生进行远程会诊，别忘了！",
        "傍晚最好进行30分钟以上的慢走！"
      ],
      active: Number(this.$route.query.activeindex)||0,
      show: true,
      // robotsay:"您好，我是大林，您的智能陪护机器人",
      placeholders: [
        "你可以问我，今天天气怎么样？",
        "我可以給您講個笑話。",
        "刚才/今天/吃了xxx。",
        "刚才/今天/走了xx公里",
        "我的血壓xx和xxx。",
        "我的心率是xxx次/分鐘。",
        "刚才體溫xx度。",
        "ss時候的體重是xx公斤。",
        "我今天很開心。"
      ],
      placeholder: "你可以问我，今天天气怎么样？",
      query: "",
      session: "",
      origin: ""
    };
  },
  created() {
    // debugger
    console.log(this.active);
    setInterval(() => {
      this.loadplaceholder();
    }, 3000);
  },
  computed: {
    login() {
      //判断是否登陆
      const logined = this.$store.state.user.user.accout
      return logined ? true : false;
    },
    saying() {
      return this.query.length > 0 || !this.login ? true : false;
    },
    titlesize() {
      return this.robotsay.length > 27
        ? "35px"
        : this.robotsay.length <= 27 && this.robotsay.length > 20
        ? "55px"
        : "75px";
    }
  },
  methods: {
    loadplaceholder() {
      const range = Math.floor(Math.random() * this.placeholders.length);
      this.placeholder = this.placeholders[range];
    },
    async UpdateSay(say) {
      this.show = false;
      setTimeout(() => {
        if (say != "") {
          this.robotsay = say;
        } else {
          this.robotsay = "我还不太会这个问题，不过会继续努力学习的~~";
        }

        this.show = true;
      }, 1500);
    },
    async Chat() {
      const data = {
        query: this.query,
        session: this.session,
        origin: this.origin
      };
      const chatres = await Chat(data);
      const robotsay = chatres.data.feedback.answer;
      this.session = chatres.data.session_id;
      this.origin = chatres.data.origin;
      this.query = "";
      this.UpdateSay(robotsay);
      console.log(chatres);
    },
    changeTab(index) {
      this.active = index;

      switch (index) {
        case 1:
          //跳转饮食
          this.$router.push({
            path: "/dailyfood",
            query:{activeindex:1}
            // query: { node: res.result.curentNode, projectId: pjid }
          });
          break;
        case 2:
          this.$router.push({
            path: "/sport",
            query:{activeindex:2}

            // query: { node: res.result.curentNode, projectId: pjid }
          });
          //跳转运动
          break;
        case 3:
          this.$router.push({
            path: "/body",
            query:{activeindex:3}
            
            
            // query: { node: res.result.curentNode, projectId: pjid }
          });
          //跳转体征
          break;
        case 4:
          this.$router.push({
            path: "/text",
            query:{activeindex:4}
            // query: { node: res.result.curentNode, projectId: pjid }
          });
          //跳转行为
          break;
        default:
          this.$router.push({
            path: "/geci",
            query:{activeindex:5}
            // query: { node: res.result.curentNode, projectId: pjid }
          });
          //跳转心情
          break;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.content {
  display: flex;
}
.main {
  width: 92%;
}
.title {
  display: flex;
}
.chat {
  margin-left: 60px;
  align-items: center; /*定义body的元素垂直居中*/
  justify-content: center; /*定义body的里的元素水平居中*/
  display: flex;
}
.curchat {
  font-weight: bolder;

  flex-wrap: wrap;
}
.demo-list-wrap {
  width: 100%;
  overflow: hidden;
  padding: 10px 50px;
}

.footer {
  width: 92%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
}
.query {
  text-align: center;
  width: 80% !important;
  font-size: 40px !important;
  font-weight: bold !important;
  color: gray;
}
.mu-text-field-input {
  height: 60px !important;
  text-align: center !important;
}
.mu-input {
  min-height: 60px !important;
  margin-bottom: 0 !important;
}

.button-wrapper {
  text-align: center;
  padding: 20px 0 15px 0;
  .mu-button {
    margin: 8px;
    margin-left: 50px;
    vertical-align: middle;
  }
  a.mu-button {
    text-decoration: none;
  }
}
.larger {
  height: 70px;
  width: 180px;
  font-size: 40px;
  font-weight: bold;
  border-radius: 100px;
}

.daiban {
  border-color: #33cb98;
  border: 5px solid;
  margin-left: 130px !important;
}
.demo {
  /deep/ .demo-icon-badge {
    // padding: 12px;
    margin-right: 16px;
  }

  /deep/ .mu-badge-circle {
    height: 50px;
    width: 50px;
    font-size: 24px;
    font-weight: 600;
  }
}

.mu-item {
  height: 60px;
  padding: 5px 16px;
  border-bottom: 0.2px solid;
}
.mu-item-title {
  height: 35px;
  line-height: 35px;
  font-size: 30px;
  font-weight: bolder;
}
</style>
